<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-14 15:14:32
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-17 20:33:00
 * @FilePath: \population\src\components\RightBotton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEjkhbsdkjbfjkd
-->
<template>
  <div>
    <div class="input">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="input = ''">清空</el-button>
      <el-button type="primary" @click="init()">添加</el-button>
    </div>
    <div class="list1" ref="scrollContainer" @mouseleave="startScroll" @mouseenter="endScroll">
      <ul>
        <li v-for="item in lists" :key="item.id">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      lists: [
        { "id": 1, "title": "全球气候变暖引发极端天气频发" },
        { "id": 2, "title": "科技创新引领未来：AI技术新突破" },
        { "id": 3, "title": "国际太空站成功发射新一代探测器" },
        { "id": 4, "title": "健康生活趋势：绿色食品越来越受欢迎" },
        { "id": 5, "title": "数字化转型加速：远程办公成为新常态" },
        { "id": 6, "title": "全球经济复苏之路：挑战与机遇并存" },
        { "id": 7, "title": "新能源汽车市场爆发增长，环保出行成主流" },
        { "id": 8, "title": "虚拟现实技术在教育领域的应用前景广阔" },
        { "id": 9, "title": "大数据分析助力企业精准营销" },
        { "id": 10, "title": "社交媒体平台对青少年心理健康的影响探讨" },
        { "id": 11, "title": "区块链技术革新金融行业交易模式" },
        { "id": 12, "title": "城市绿化工程提升居民生活质量" },
        { "id": 13, "title": "全球文化交流加深，多元文化共融发展" },
        { "id": 14, "title": "全球气候变暖引发极端天气频发" },
        { "id": 15, "title": "科技创新引领未来：AI技术新突破" },
        { "id": 16, "title": "国际太空站成功发射新一代探测器" },
        { "id": 17, "title": "健康生活趋势：绿色食品越来越受欢迎" },
        { "id": 18, "title": "数字化转型加速：远程办公成为新常态" },
        { "id": 19, "title": "全球经济复苏之路：挑战与机遇并存" },
        { "id": 20, "title": "新能源汽车市场爆发增长，环保出行成主流" },
        { "id": 21, "title": "虚拟现实技术在教育领域的应用前景广阔" },
        { "id": 22, "title": "大数据分析助力企业精准营销" },
        { "id": 23, "title": "社交媒体平台对青少年心理健康的影响探讨" },
        { "id": 24, "title": "区块链技术革新金融行业交易模式" },
        { "id": 25, "title": "城市绿化工程提升居民生活质量" },
        { "id": 26, "title": "全球文化交流加深，多元文化共融发展" }
      ],
      intervalId: null,
      scrollSpeed: 1
    };
  },
  methods: {
    init() {
      if (this.input.trim() !== '') {
        const newItem = { id: this.lists.length + 1, title: this.input };
        this.lists.push(newItem);
        this.input = ''; 
      }
    },
    startScroll() {
      const container = this.$refs.scrollContainer;
      let scrollTop = 0;
      this.intervalId = setInterval(() => {
        scrollTop += this.scrollSpeed;
        if (scrollTop >= container.scrollHeight - container.clientHeight) {
          scrollTop = 0;

        }
        container.scrollTop = scrollTop;
      }, 16);
    },
    endScroll(){
      clearInterval(this.intervalId); 
    }
  },
  mounted() {
    this.startScroll();
    this.init();
  },
};
</script>

<style lang="less" scoped>
.input {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  :deep(.el-input__inner) {
    border-radius: 20px;
    border-color: #fff;
    margin-left: 20px;
    width: 200px;
    height: 40px;
    background-color: transparent !important;
    color: #fff;
  }
  

  :deep(.el-button) {
    border-radius: 20px;
    border-color: #fff;
    background-color: transparent;
  }
}

.list1 {
  height: 320px;
  overflow: hidden;
    // border: 1px solid #fff;
    padding: 10px;
    width: 98%;
    // border-radius: 20px;
    overflow-y: scroll;

  ul {
    width: 90%;
    list-style: none;
    // height: 80%;


    li {
      width: 90%;
      margin-bottom: 10px;
      color: #fff;
      font-size: 17px;
      line-height: 1.5;
      border-bottom: 1px solid #fff;
    }
  }
}
</style>